<template>
	<uni-popup ref="popup" type="bottom" background-color="transparent" class="popup-class"
		:safe-area="false" @change="changeState">
		<view class="popup-content" :style="{'background-image': 'url('+DailyPopupImg.content+')'}">
			<!-- 每日必领 -->
			<view class="daily-receive">
				<view class="left-area">
					<text class="daily-text1">每日必领</text>
					<text v-if="spendAmountProgress.length" 
						class="daily-text2">{{`单日消费满${Math.floor(spendAmountProgress[0])}元，即可领取相关权益`}}</text>
				</view>
				<view class="rules column-center-flex" @click="openRules">活动规则</view>
			</view>
			<view class="content-class">
				<!-- 任务进度 -->
				<view class="task-progress">
					<!-- :style="{'background-image': 'url('+DailyPopupImg.time+')'}" -->
					<view class="time-class">
						<image :src="clcokImg" class="clock-class"></image>
						<text class="text">{{ countTime }}</text>
						<text v-if="countTime" class="text">后重置</text>
						<!-- <image :src="StarPng" class="star-class"></image> -->
					</view>
					<view class="consume-class">
						<view class="phone">
							<view class="phone-view" v-for="(item, index) in spendAmountProgress" :key="index">
								<image :src="priceImg" class="phone-class1"></image>
								<view class="price-text" :class="todaySpend >= item ? 'ok-price' : 'no-price'">{{ Math.floor(item) }}</view>
							</view>
						</view>
						<view class="price-class">
							<view v-if="spendPercent" class="has-consume-percent common-consume" :style="{width: `${spendPercent}px`}">
								{{`已消费${todaySpend}元`}}
							</view>
							<view v-else class="common-consume">
								{{`已消费${todaySpend}元`}}
							</view>
						</view>
					</view>
					<view class="consume-view no-consume" :style="{'background-image': 'url('+DailyPopupImg.noConsume+')'}">
						<view v-if="shortfall" class="inner-consume">
							<text>还差</text>
							<text class="has-text">{{ shortfall }}</text>
							<text>元即可领取奖励</text>
						</view>
						<view v-else class="inner-consume">
							<text class="has-text">今日任务已达成</text>
						</view>
					</view>
				</view>

				<!-- 达成领取优惠券 -->
				<view class="coupons-class">
					<coupons-list :spendAmountProgress="spendAmountProgress" :couponLists="task"
						@toDetail="toDetail" @toGetReward="toGetReward"></coupons-list>
				</view>
			</view>
		</view>

		<!-- 活动规则 -->
		<uni-popup ref="rulesPopup" type="center" background-color="transparent" class="rules-popup-class" :is-mask-click="false">
			<view class="activity-rules">
				<view class="close-btn" @click="closeRules">&#10005</view>
				<view class="activity-content">
					<view class="head-img" :style="{'background-image': 'url('+DailyPopupImg.rulesBack+')'}">
						活动规则
					</view>
					<view class="list">
						<text class="text-class">{{ dailyTaskIntro }}</text>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 优惠券详情弹层 -->
		<uni-popup ref="couponsPopup" type="center" background-color="transparent" class="" :is-mask-click="false">
			<view class="coupons-detail">
				<view class="close-btn" @click="closeCoupons">&#10005</view>
				<view class="coupons-content">
					<view class="head-img">
						优惠券
					</view>
					<view class="content-list">
						<coupons-detail :detailData="detailData"></coupons-detail>
					</view>
					<view class="btn-class">
						<view class="flex-center btn" @click="toLock">未解锁</view>
						<view class="flex-center desc-text">
							<text>
								领取后优惠券将发放至您的账户
								可前往“个人中心-优惠券”查看
							</text>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>

		<!-- 盲盒详情弹层 -->
		<uni-popup ref="redrawPopup" type="center" background-color="transparent" :is-mask-click="false">
			<view class="redraw-detail">
				<view class="close-btn" @click="closeRedraw">&#10005</view>
				<view class="redraw-content">
					<view class="head-img">
						{{ blindboxDetail.name }}
					</view>
					<view class="img-class">
						<image :src="blindboxDetail.pic" class="image-re"></image>
						<!-- <view class="num-class">X 2</view> -->
					</view>
					<view class="use-desc">
						<view>
							<text class="normal-text text_1">使用说明：</text>
							<text class="normal-text text_2">如您对开盒奖品不满意，在开盒结果页使用重抽卡免费重抽！您可自行决定是否保留原有奖品或或选择重抽奖品。（部分限定盲盒不可用）领取后可</text>
						</view>
						<view class="normal-text text_2">前往 盲盒详情页-重抽卡 查看</view>
					</view>
					<view class="btn-class">
						<view class="flex-center btn" @click="toLock">未解锁</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</uni-popup>
</template>

<script>
import baseUrl from '../../utils/siteInfo';
import CouponsList from './coupons-list.vue';
import CouponsDetail from './coupons-detail.vue';
import { DailyPopupImg, SpendAmountProgressImg,StarPng } from '../../utils/objectValue';
import { dailyTask, rewardDetail, receiveReward } from '@/api/daily.js';

export default {
	name: 'DailyPopup',
	components: {
		CouponsList,
		CouponsDetail
	},
	props: {
		show: {
			type: Boolean,
			require: true,
			default: false
		}
	},
	data() {
		return {
			dailyTaskRes: {},
			countTime: '',
			timer: null,
			hasConsume: 198,
			detailData: {},
			clcokImg: baseUrl.imgroot + '/static/images/clock.png',
			_198Img: baseUrl.imgroot + '/static/images/198.png',
			_298Img: baseUrl.imgroot + '/static/images/298.png',
			_598Img: baseUrl.imgroot + '/static/images/598.png',
			DailyPopupImg,
			priceImg: SpendAmountProgressImg[1],
			StarPng,
			windowWidth: '',
			windowHeight: '',
			blindboxDetail: {}
		};
	},
	computed: {
		// 活动规则
		dailyTaskIntro() {
			const { intro = {} } = this.dailyTaskRes;
			return intro.daily_task_intro || '';
		},
		spendAmountProgress() {
			const { spendAmountProgress = [] } = this.dailyTaskRes;
			return spendAmountProgress;
		},
		percent() {
			const { percent = 0 } = this.dailyTaskRes;
			return percent;
		},
		task() {
			const { task = [] } = this.dailyTaskRes;
			return task;
		},
		todaySpend() {
			const { todaySpend = 0 } = this.dailyTaskRes;
			return todaySpend;
		},
		shortfall() {
			const { todaySpend = 0, spendAmountProgress = [] } = this.dailyTaskRes;
			if(spendAmountProgress.length &&  todaySpend - spendAmountProgress[spendAmountProgress.length -1] >= 0) {
				return false;
			}
			const value = spendAmountProgress.find(item => {
				return item - todaySpend > 0;
			});
			return (value - todaySpend).toFixed(2);
		},
		// 已消费进度条
		spendPercent() {
			const { todaySpend = 0, spendAmountProgress = [] } = this.dailyTaskRes;
			if(!todaySpend) {
				return false;
			} else {
				const realWidth = this.windowWidth - 50; // 实际宽度
				const gapWidth = 10; // 间隙
				const leftWidth = realWidth - (50 + gapWidth) * spendAmountProgress.length + gapWidth;
				let count = 0;
				for(let i = 0; i < spendAmountProgress.length; i++) {
					if(todaySpend >= spendAmountProgress[i]) {
						count++;
					}
				}
				if(count >= spendAmountProgress.length) {
					return '100%';
				} else {
					const percentWidth = leftWidth + (50 + gapWidth) * count;
					return percentWidth;
				}
			}
		},
	},
	onLoad() {
	},
	created(){
		const {
			windowWidth,
			windowHeight,
			windowTop,
			safeArea,
			screenHeight,
			safeAreaInsets
		} = uni.getSystemInfoSync();
		console.log('windowWidth-', windowWidth, windowHeight, safeArea, screenHeight);
		this.windowWidth = windowWidth;
		this.windowHeight = windowHeight;
	},
	methods: {
		open() {
			this.getDailyData(true);
		},
		close() {
			this.$refs.popup.close();
		},
		changeState(e) {
			const {show = false} = e;
			if(show) {
				this.timer = setInterval(() => {
					this.countDown();
				}, 1000);
			} else {
				clearInterval(this.timer);
				this.timer = null;
				this.closeRules();
				this.closeCoupons();
				this.closeRedraw();
			}
		},
		countDown() {
			const startTime = new Date(); // 当前时间
			const endTime = new Date(new Date().setHours(23, 59, 59, 999)); // 设置今天最后时间
			const leftTime = endTime - startTime; // 计算剩余毫秒数
			let hours = parseInt(leftTime / 1000 / 60 / 60 % 24, 10); // 计算剩余小时数
			let minutes = parseInt(leftTime / 1000 / 60 % 60, 10); // 计算剩分钟数
			let seconds = parseInt(leftTime / 1000 % 60, 10); // 计算剩余秒数
			
			hours = this.checkTime(hours).toString();
			minutes = this.checkTime(minutes).toString();
			seconds = this.checkTime(seconds).toString();
			this.countTime = hours + ' : ' + minutes + ' : ' + seconds;
		},
		// 时间补全0
		checkTime(i) {
			if(i < 10) {
				i = '0' + i;
			}
			return i;
		},
		openRules() {
			this.$refs.rulesPopup.open();
		},
		closeRules() {
			this.$refs.rulesPopup.close();
		},
		toDetail(value) {
			console.log('value-', value);
			const {type, resourceId} = value;
			rewardDetail({type, resourceId}).then(res => {
				const {code, data = {}} = res;
				if(code == 0) {
					// 优惠券
					if(type === 'coupon') {
						this.detailData = {...data};
						this.$refs.couponsPopup.open();
					} else {
						// 盲盒
						// this.blindboxDetail = {...data}
						// this.$refs.redrawPopup.open();
					}
				}
			}).catch(err => {
				uni.$u.toast(err.msg);
			});
		},
		toGetReward(value) {
			console.log('value-', value);
			receiveReward(value).then(res => {
				const {code, msg = ''} = res;
				if(code == 0) {
					uni.showToast({
						icon: 'none',
						title: msg
					});
					this.getDailyData(false);
				}
			}).catch(err => {
				uni.showToast(err.msg);
			});
		},
		getDailyData(isOpen = false) {
			dailyTask().then(res => {
				if(isOpen) {
					this.$refs.popup.open();
				}
				const {code, data = {}} = res;
				if(code == 0) {
					this.dailyTaskRes = {...data};
				} else {
					this.dailyTaskRes = {};
				}
			}).catch(err => {
				uni.showToast({
					icon: 'none',
					title: err.msg
				});
			});
		},
		closeCoupons() {
			this.$refs.couponsPopup.close();
		},
		closeRedraw() {
			this.$refs.redrawPopup.close();
		},
		toLock() {

		}
	}
}
</script>

<style lang="scss" scoped>
.popup-class {
	width: 100%;

	.popup-content {
		width: 100%;
		max-height: 75vh;
		/* #ifdef H5 */
		padding-bottom: 60px;
		/* #endif */
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		background-size: cover;
		background-repeat: no-repeat center;
	}
	.rules{
		position: absolute;
		top: 60rpx;
		right: 0;
		width: 50rpx;
		height: 139rpx;
		background-color: rgba(0, 0, 0, 0.4);
		color: rgba(255, 255, 255, 0.6);
		// display: flex;
		// align-items: center;
		// justify-content: center;
		font-size: 24rpx;
		writing-mode: vertical-rl;
		text-orientation: mixed;
		letter-spacing: 8rpx;
		border-top-left-radius: 14rpx;
		border-bottom-left-radius: 14rpx;
	}
	.daily-receive {
		width: 100%;
		height: 240rpx;
		display: flex;
		flex-direction: row;
		color: #ffffff;
		font-family: PingFangHK-Semibold;
	}
	.left-area {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 40rpx 60rpx;
	}
	.right-area {
		width: 26px;
		height: 68px;
		margin-top: 30px;
		background-size: 100% 100%;
		// background-color: #1E1E1E 45%;
		// opacity: 45%;
		// color: #FFFFFF;
		// font-size: 12px;
		// font-family: PingFangHK-Regular;
	}
	.daily-text1 {
		font-size: 74rpx;
		font-family: BTH;
		font-style: oblique;
		// transform: skewX(0deg);
		// font-weight: 600;
	}
	.daily-text2 {
		font-size: 36rpx;
		font-family: BTH;
	}
	.paragraph_1 {
		margin-top: 26px;
		overflow-wrap: break-word;
		color: white;
		font-size: 24rpx;
		font-family: PingFangHK-Regular;
		text-align: left;
		line-height: 14px;
		background-color: #645882;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
	}
	.content-class {
		overflow-y: auto;
	}
	.task-progress {
		// height: 127px;
		margin: 15px 25px 0;
		background: linear-gradient(to right, #FEDBF1, #EBDDFE);
		border-radius: 10rpx;
	}

	.time-class {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 324rpx;
		height: 56rpx;
		background: linear-gradient(to right, #F15F2E, #FCA55D);
		border-radius: 5px;
	}

	.clock-class {
		width: 36rpx;
		height: 42rpx;
		margin-left: 3px;
	}
	.star-class {
		width: 7px;
		height: 9px;
	}
	.text {
		font-size: 28rpx;
		color: #ffffff;
		margin-left: 3px;
	}
	.consume-class {
		margin-top: 8px;
	}

	.price-class {
		margin: -26px 10px 0 10px;
		height: 23px;
		border-radius: 11px;
		background-color: #FFA8E3;
		.has-consume-percent {
			background: linear-gradient(to right, #FC6E68, #FE51A0);
		}
		.common-consume {
			min-width: 72px;
			padding: 1px 1px 1px 10px;
			line-height: 20px;
			height: 100%;
			border-radius: 11px;
			font-size: 24rpx;
			font-family: PingFangHK-Regular, PingFangHK;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
	.phone {
		display: flex;
		// margin-left: 40%;
		justify-content: flex-end;
		align-items: flex-end;
		padding: 0 7px;
	}
	.phone-view {
		width: 50px;
		margin-left: 10px;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.phone-class1 {
		width: 40px;
		height: 41px;
	}
	.phone-class2 {
		width: 40px;
		height: 41px;
	}
	.phone-class3 {
		width: 35px;
		height: 33px;
	}

	.price-text {
		width: 44px;
		height: 25px;
		font-size: 26rpx;
		color: #ffffff;
		border: 1px solid #ffffff;
		backdrop-filter: blur(0.6646728515625px);
		border-radius: 6px;
		text-align: center;
		line-height: 22px;
	}
	.no-price {
		background-color: #E2B0C7;
	}
	.ok-price {
		background-color: #FE5992;
	}
	.consume-view {
		margin-top: 15px;
		width: 100%;
		height: 38px;
		padding-top: 11px;
	}
	.has-consume{
		color: #821D18;
		background-size: 100% 100%;
		// background: linear-gradient(to bottom, #FFEAC0, #FFCC4D);
		.has-text{
			color: #FF2625;
		}
	}
	.no-consume{
		background-size: 100% 100%;
		// background: linear-gradient(to bottom, #ECDDFE, #FFBEE8);
	}
	.inner-consume {
		text-align: center;
		overflow-wrap: break-word;
		font-size: 32rpx;
		font-family: PingFangHK-Semibold;
		font-weight: 600;
		white-space: nowrap;
		color: #821D18;
		.has-text{
			color: #FF2625;
		}
	}
	.coupons-class {
		margin: 20px 20px 0;
	}

	.head-img {
		background-size: cover;
		width: 220px;
		height: 45px;
		text-align: center;
		font-family: BTH;
		font-size: 44rpx;
		color: #ffffff;
		line-height: 45px;
		background-size: cover;
		background-repeat: no-repeat center;
		background-image: url(http://dev-hashmart.mstshop.cn/static/images/rules-back.png);
	}

	.btn-class {
		width: 100%;
		padding: 15px 20px;
		.flex-center {
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.btn {
			height: 54px;
			background: linear-gradient(to bottom, #E2E2E2, #C2BFBF);
			overflow-wrap: break-word;
			color: #858484;
			font-size: 40rpx;
			font-family: PingFangHK-Medium;
			font-weight: 500;
			white-space: nowrap;
		}
		.desc-text {
			margin-top: 10px;
			overflow-wrap: break-word;
			color: #858484;
			font-size: 28rpx;
			font-family: PingFangHK-Medium;
			font-weight: 500;
		}
	}

	.rules-popup-class {
		width: 100%;
		.activity-rules {
			width: 82%;
			max-height: 60vh;
			margin: 10% 9% 1%;
			background: linear-gradient(to bottom, #FDDBF1, #ECDDFE);
			border-radius: 18rpx;
			.close-btn {
				position: absolute;
				right: 7%;
				top: 5px;
				width: 31px;
				height: 31px;
				background-color: rgba(100, 95, 105, 0.7);
				text-align: center;
				line-height: 28px;
				border-radius: 16px;
				color: #ffffff;
				border: 1px solid #ffffff;
				opacity: 0.7;
			}
			.activity-content {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}
			.list{
				height: calc(60vh - 90px);
				overflow-y: auto;
				margin: 20px 20px 20px;
			}
			.text-class{
				overflow-wrap: break-word;
				color: rgba(59, 59, 59, 1);
				font-size: 14px;
				font-family: PingFangHK-Regular;
				line-height: 22px;
			}
		}
	}
	.coupons-detail {
		width: 85vw;
		max-height: 65vh;
		margin: 0 7.5vw;
		background: linear-gradient(to bottom, #FDDBF1, #ECDDFE);
		border-radius: 18rpx;
		.close-btn {
			position: absolute;
			right: 7%;
			top: -42px;
			width: 31px;
			height: 31px;
			background-color: rgba(100, 95, 105, 0.7);
			text-align: center;
			line-height: 28px;
			border-radius: 16px;
			color: #ffffff;
			border: 1px solid #ffffff;
			opacity: 0.7;
		}
		.coupons-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.content-list {
				width: 100%;
				padding: 10px 20px 0;
				max-height: calc(65vh - 132px - 45px);
				overflow-y: auto;
			}
		}
		.text-class{
			margin-top: 15px;
			padding: 15px 20px;
			overflow-wrap: break-word;
			color: rgba(59, 59, 59, 1);
			font-size: 28rpx;
			font-family: PingFangHK-Regular;
			font-weight: NaN;
			line-height: 22px;
		}
	}
	.redraw-detail {
		width: 82vw;
		margin: 0 9vw;
		background: linear-gradient(to bottom, #FDDBF1, #ECDDFE);
		border-radius: 18rpx;
		.close-btn {
			position: absolute;
			right: 7%;
			top: -42px;
			width: 31px;
			height: 31px;
			background-color: rgba(100, 95, 105, 0.7);
			text-align: center;
			line-height: 28px;
			border-radius: 16px;
			color: #ffffff;
			border: 1px solid #ffffff;
			opacity: 0.7;
		}
		.redraw-content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.img-class {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 15px 0 0;
			}
			.image-re {
				width: 98px;
				height: 102px;
			}
			.num-class {
				margin-left: 20px;
				overflow-wrap: break-word;
				color: #382966;
				font-size: 120rpx;
				font-family: YouSheBiaoTiHei;
				white-space: nowrap;
			}
			.use-desc{
				padding: 15px 20px 0;
			}
			.normal-text {
				overflow-wrap: break-word;
				font-size: 28rpx;
				font-family: PingFangHK-Regular;
				line-height: 20px;
			}
			.text_1 {
				color: #EA6E7A;
			}
			.text_2{
				color: #353535;
			}
		}
	}
}

</style>